<template>
  <div id="homemain" class="home">
    <div style="display:flex">
      <div style="flex:1">
        <div class="mainbg">
          <Button class="mbt" @click="ckqx" type="primary" ghost
            >查看详情</Button
          >
          <div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
        </div>
        <div class="mainbg mar" style="position:relative;">
          <div class="mainbgH">
            月度待办事项
            <span class="dbtitle">
              <span class="color1"></span>正在准备
              <span class="color2"></span>进行中
              <span class="color3"></span>已完成
            </span>
          </div>
          <full-calendar
            :events="monthData"
            class="test-fc"
            first-day="1"
            locale="fr"
            @changeMonth="changeMonth"
            @eventClick="eventClick"
            @dayClick="dayClick"
            lang="zh"
            @moreClick="moreClick"
          ></full-calendar>
          <div class="calendarModal" :style="{left:rili.left+'px',top:rili.top+'px'}" v-show="rilimodal">
              机组：{{rili.aircrewNumber}}<br/>
              编号：{{rili.maintainCode}}
          </div>
        </div>
      </div>
      <div style="width:560px;margin-left:15px;margin-right:15px;">
        <div class="mainbg" style="height:675px;width:560px;">
          <div class="mainbgH">机组状态分布图</div>
          <div class="fbtbg">
             <div v-for="(item,index) in equipmentList" :key="index" :class="'jzpoint'+(index+1)">
                 <div class="cir" v-if="item.alarmAlias=='危险'" style="color:#cc0000;"><Icon type="ios-pin" /></div>
                 <div class="cir" v-if="item.alarmAlias=='报警'" style="color:#f0c05c;"><Icon type="ios-pin" /></div>
                 <div class="cir" v-if="item.alarmAlias=='正常'" style="color:#0dc38c;"><Icon type="ios-pin" /></div>
                 <div class="cir" v-if="item.alarmAlias=='停车'" style="color:#1892ef;"><Icon type="ios-pin" /></div>
                 <div class="cir" v-if="item.alarmAlias=='断网'" style="color:#6c6969;"><Icon type="ios-pin" /></div>
                 <div class="fbtTip">
                    <!-- 当前状态:{{item.erpcode}}<br /> -->
                    性能监测:{{item.alarmAlias}}<br />
                    机组名称:{{item.equipmentName}}<br />
                    HD 编 号:{{item.hdNumber}}<br />
                    <Button
                      class="mbt2"
                      @click="$router.push({ path: '/home2?id='+item.id })"
                      type="primary"
                      ghost
                      >查看详情</Button
                    >
                  </div>
             </div>
          </div>
        </div>
      </div>
      <div style="flex:1">
        <div class="mainbg">
          <div id="myChart2" :style="{ width: '100%', height: '100%' }"></div>
        </div>
        <div class="mainbg mar">
          <div class="mainbgH">问题跟踪</div>
          <ul class="askList">
            <li v-for="(item,index) in wtgzList" :key="index">
              <div>{{item.description}}</div>
              <div class="over">
                <div class="loadbg">
                  <div class="loading" :style="'width:'+item.completePercent+'%;'"></div>
                </div>
                <div class="askFont">{{item.completePercent}}%</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="display:flex" class="mar">
      <div style="flex:1">
        <div class="mainbg">
          <div id="myChart3" :style="{ width: '100%', height: '100%' }"></div>
        </div>
      </div>
      <div style="width:560px;margin-left:15px;margin-right:15px;">
        <div class="mainbg">
          <div id="myChart4" :style="{ width: '100%', height: '100%' }"></div>
        </div>
      </div>
      <div style="flex:1">
        <div class="mainbg">
          <div id="myChart5" :style="{ width: '100%', height: '100%' }"></div>
        </div>
      </div>
    </div>

    <Modal :mask-closable="false"	 width="1000" v-model="lookDetailDiv">
      <div>
        时间：
        <DatePicker
          v-model="lookDetail.startYear"
          style="width:100px;"
          format="yyyy"
          @on-change="getyear1"
          type="year"
          split-panels
          placeholder="选择时间"
        ></DatePicker>
        -
        <DatePicker
          v-model="lookDetail.endYear"
          style="width:100px;margin-right:20px;"
          format="yyyy"
          @on-change="getyear2"
          type="year"
          split-panels
          placeholder="选择时间"
        ></DatePicker>

        电站：<Select v-model="lookDetail.powerStation" clearable filterable @on-change="getHd" style="width:100px;margin-right:20px;">
                <Option
                  v-for="(item, index) in powerStationList"
                  :value="item"
                  :key="index"
                >{{ item }}</Option>
              </Select>
        HD编号：<Select
                v-model="lookDetail.hdNumber"
                clearable
                filterable
                :disabled="HBnumberList.length == 0"
                @on-change="getJz"
                style="width:100px;margin-right:20px;"
              >
                <Option v-for="(item, index) in HBnumberList" :value="item" :key="index">{{ item }}</Option>
              </Select>

        机组： <Select
                v-model="lookDetail.aircrewNumber"
                clearable
                filterable
                :disabled="JZnumberList.length == 0"
                style="width:100px;margin-right:20px;"
              >
                <Option v-for="(item, index) in JZnumberList" :value="item" :key="index">{{ item }}</Option>
              </Select>


        <Button @click="getWanoList" type="primary">查询</Button>
      </div>
      <div id="myChart6" style="width:970px;height:310px;margin-top:15px;"></div>
      <Table :columns="columns1" :data="data1"></Table>
    </Modal>
  </div>
</template>

<script>
import { FullCalendar } from "vue-fullcalendar";
import {
  getSelectOption,getAllEqu
} from '@/api/select'
import {getTableData} from '@/api/middleware'
import {
  getHealth,
  getIO,
  getSubSystem,
  getWano,
  getFailureMode,
  getWanoByStartYearAndEndYear,
  getAllByAircrewNumberStartYearAndEndYear,
  equipment,
  getWaitingProcessList,
  getListByAdminId,
  maintainPlanGetAll
} from "@/api/home";
export default {
  data() {
    return {
      dingshi:'',
      lookDetailDiv: false,
      lookDetail: {
        powerStation:"",
        hdNumber:"",
        aircrewNumber: "",
        startYear: "",
        endYear:""
      },
      rilimodal:false,
      rili:{
        aircrewNumber:'',
        maintainCode:'',
        top:0,
        left:0
      },
      wtgzList:[],
      equipmentList:[],
       powerStationList:[],
      HBnumberList:[],
      JZnumberList:[],
      wanoYear: [],
      wanoName: [],
      wanoList: [],
      getIOList: [],
      monthData: [
        // {
        //   title: "例行公事，检查各个仪器设备", // 事件内容
        //   start: "2019-12-01", // 事件开始时间
        //   end: "2019-12-01", // 事件结束时间
        //   cssClass: "color1" // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
        // },
        // {
        //   title: "测试测试一下哈",
        //   start: "2019-12-06",
        //   end: "2019-12-06",
        //   cssClass: "color2"
        // },
        // {
        //   title: "完成了测试",
        //   start: "2019-12-10",
        //   end: "2019-12-10",
        //   cssClass: "color3"
        // }
      ],
      option: {
        title: {
          text: "WANO指标",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "100",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          //data: ["D1", "D2", "L1", "L2", "中间值", "先进值"],
          top: "35"
        },
        xAxis: [
          {
            type: "category",
            data: [
              // "2010",
              // "2011",
              // "2012",
              // "2013",
              // "2014",
              // "2015",
              // "2016",
              // "2017",
              // "2018",
              // "2019"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   name: "D1",
          //   type: "bar",
          //   itemStyle: {
          //     color: "#24efbd"
          //   },
          //   data: [32.0, 24.9, 27.0, 23.2, 25.6, 56.7, 32.6, 20.0, 26.4, 23.3]
          // },
          // {
          //   name: "D2",
          //   type: "bar",
          //   itemStyle: {
          //     color: "#12ccee"
          //   },
          //   data: [22.6, 25.9, 49.0, 26.4, 28.7, 50.7, 48.7, 38.8, 36.0, 22.3]
          // },
          // {
          //   name: "L1",
          //   type: "bar",
          //   itemStyle: {
          //     color: "#fd7d15"
          //   },
          //   data: [24, 23, 25, 12, 23, 34, 21, 23, 34, 45]
          // },
          // {
          //   name: "L2",
          //   type: "bar",
          //   itemStyle: {
          //     color: "#f4370b"
          //   },
          //   data: [23, 25, 12, 23, 34, 21, 23, 34, 45, 32]
          // },
          // {
          //   name: "中间值",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#ffbe0e"
          //   },
          //   lineStyle: {
          //     color: "#ffbe0e"
          //   },
          //   data: [54, 53, 35, 52, 73, 54, 61, 73, 84, 55]
          // },
          // {
          //   name: "先进值",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#0a4add"
          //   },
          //   lineStyle: {
          //     color: "#0a4add"
          //   },
          //   data: [44, 53, 85, 72, 53, 64, 51, 73, 64, 75]
          // }
        ]
      },
      colorarry: [
        "#24efbd",
        "#12ccee",
        "#ef8337",
        "#e34928",
        "#f7bf44",
        "#184dd5"
      ],
      option2: {
        title: {
          text: "机组健康状态",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "35"
        },
        xAxis: [
          {
            type: "category",
            data: [
              // "2010",
              // "2011",
              // "2012",
              // "2013",
              // "2014",
              // "2015",
              // "2016",
              // "2017",
              // "2018",
              // "2019"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   name: "D1",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#24efbd"
          //   },
          //   lineStyle: {
          //     color: "#24efbd"
          //   },
          //   data: [54, 53, 35, 52, 73, 54, 61, 73, 84, 55]
          // },
          // {
          //   name: "D2",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#12ccee"
          //   },
          //   lineStyle: {
          //     color: "#12ccee"
          //   },
          //   data: [44, 53, 85, 72, 53, 64, 51, 73, 64, 75]
          // }
        ]
      },
      option3: {
        title: {
          text: "I0指标",
          // subtext: "电气、机械、仪控在机组不可用时间（h)",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "25"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: []
      },
      option4: {
        title: {
          text: "应急柴油机故障模式统计",
          subtext: "问题数量（个)",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "25"
        },
        xAxis: [
          {
            type: "category",
            data: [
              // "备件缺陷",
              // "翻新质量",
              // "检修工艺",
              // "老化",
              // "设计",
              // "改造",
              // "其他"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   name: "UD45",
          //   type: "bar",
          //   barWidth: "5",
          //   itemStyle: {
          //     color: "#24d5ef"
          //   },
          //   data: [32.0, 24.9, 27.0, 23.2, 25.6, 56.7, 32.6, 20.0, 26.4, 23.3]
          // },
          // {
          //   name: "MTU",
          //   type: "bar",
          //   barWidth: "5",
          //   itemStyle: {
          //     color: "#fe356e"
          //   },
          //   data: [22.6, 25.9, 49.0, 26.4, 28.7, 50.7, 48.7, 38.8, 36.0, 22.3]
          // },
          // {
          //   name: "PC2.6",
          //   type: "bar",
          //   barWidth: "5",
          //   itemStyle: {
          //     color: "#ffbc3c"
          //   },
          //   data: [24, 23, 25, 12, 23, 34, 21, 23, 34, 45]
          // }
        ]
      },
      option5: {
        title: {
          text: "应急柴油机故障子系统",
          subtext: "问题数量（个)",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "35"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   name: "UD45",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#24d5ef"
          //   },
          //   lineStyle: {
          //     color: "#24d5ef"
          //   },
          //   data: [32.0, 24.9, 27.0, 23.2, 25.6, 56.7, 32.6, 20.0]
          // },
          // {
          //   name: "MTU",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#fe356e"
          //   },
          //   lineStyle: {
          //     color: "#fe356e"
          //   },
          //   data: [22.6, 25.9, 49.0, 26.4, 28.7, 50.7, 48.7, 38.8]
          // },
          // {
          //   name: "PC2.6",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#fcbc42"
          //   },
          //   lineStyle: {
          //     color: "#fcbc42"
          //   },
          //   data: [24, 23, 25, 12, 23, 34, 21, 23, 34, 45]
          // }
        ]
      },
      option6: {
        title: {
          text: "大亚湾应急柴油机 WANO 指标趋势分析",
          left:'center',
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "20",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data:[],
          //data: ["D1", "D2", "L1", "L2", "中间值", "先进值"],
          top: "35"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: []
      },
      columns1: [
        {
          title: "电站",
          key: "powerStation",
          width: "100"
        },
        {
          title: "机组编号",
          key: "aircrewNumber",
          width: "100"
        },
        {
          title: "功能位置",
          key: "location",
          width: "100"
        },
        {
          title: "机型",
          key: "model",
          width: "100"
        },
        {
          title: "发生时间",
          key: "startTime",
          width: "150"
        },
        {
          title: "事件标题",
          key: "title",
          width: "100"
        },
        {
          title: "事件描述",
          key: "description",
          width: "300"
        },
        {
          title: "原因分类",
          key: "reasonCatory",
          width: "100"
        },
        {
          title: "专业分类",
          key: "professionCatory",
          width: "100"
        },
        {
          title: "子系统",
          key: "subsystem",
          width: "100"
        },
        {
          title: "大修/日常",
          key: "everyday",
          width: "100"
        },
        {
          title: "问题进度",
          key: "model",
          width: "100"
        },
        {
          title: "记录人",
          key: "recordName",
          width: "100"
        },
        {
          title: "记录时间",
          key: "recordTime",
          width: "150"
        }
      ],
      data1:[]
    };
  },
  methods: {
    getyear1(e){
      this.lookDetail.startYear=e;
    },
    getyear2(e){
      this.lookDetail.endYear=e;
    },
    getAllEqument() {
      getAllEqu(null).then(res => {
        this.allEquList = res.data;
        let arr = res.data.map(function(item) {
          return item.powerStation;
        });
        this.powerStationList = [...new Set(arr)];
      });
    },
    getHd(e) {
      this.JZnumberList = [];
      this.allEquList2 = this.allEquList.filter(item => item.powerStation == e);
      let arr2 = this.allEquList2.map(function(item) {
        return item.hdNumber;
      });
      this.HBnumberList = [...new Set(arr2)];
    },
    getJz(e) {
      let arr = this.allEquList2.filter(item => item.hdNumber == e);
      let arr2 = arr.map(function(item) {
        return item.aircrewNumber;
      });
      this.JZnumberList = [...new Set(arr2)];
    },
    ckqx(){
      this.lookDetailDiv = true;
      //this.$echarts.init(document.getElementById('myChart6')).resize();
    },
    getWaiting(){
      maintainPlanGetAll({adminId:localStorage.getItem('recordUserId')}).then(res => {
        if (res.code == 0) {
          for(let i=0;i<res.data.length;i++){
            let classname='color1'
            if(res.data[i].maintainStatusValue==1){
              classname='color1'
            }else if(res.data[i].maintainStatusValue==2){
              classname='color2'
            }else if(res.data[i].maintainStatusValue==3){
              classname='color3'
            }
            this.monthData.push({
              title:res.data[i].aircrewNumber,
              start:res.data[i].planStartTime.substr(0,10),
              end:res.data[i].planEndTime.substr(0,10),
              cssClass:classname,
              aircrewNumber:res.data[i].aircrewNumber,
              maintainCode:res.data[i].maintainCode
            })
          }
        }
      });
    },
    getWanoList() {
      let that = this;
      that.option6.series=[];
      that.wanoYear=[];
      that.wanoName=[];
      if(document.getElementById("myChart6")){
        that.$echarts.init(document.getElementById("myChart6")).dispose();
      }

      getWanoByStartYearAndEndYear(that.lookDetail).then(res => {
        if (res.code == 0) {
          this.wanoList=res.data;
          var xxx = res.data.map(function(item) {
            return item.year;
          });
          var xxx2 = res.data.map(function(item) {
            return item.name;
          });
          xxx.forEach(function(item) {
            if (that.wanoYear.length > 0) {
              if (that.wanoYear.indexOf(item) > -1) {
                return;
              } else {
                that.wanoYear.push(item);
              }
            } else {
              that.wanoYear.push(item);
            }
          });
          xxx2.forEach(function(item) {
            if (that.wanoName.length > 0) {
              if (that.wanoName.indexOf(item) > -1||item==null||item.length==0) {
                return;
              } else {
                that.wanoName.push(item);
              }
            } else {
              that.wanoName.push(item);
            }
          });
          that.option6.xAxis[0].data=that.wanoYear;
          that.option6.legend.data=that.wanoName;
          var zzz = [];
            that.wanoName.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });
            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option6.series.push({
                name: zzz[i][0].name,
                type: zzz[i][0].line ? "line" : "bar",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }

            that.$echarts
              .init(document.getElementById("myChart6"))
              .setOption(that.option6);
        }
      });
      //底部表格
      getAllByAircrewNumberStartYearAndEndYear(that.lookDetail).then(res => {
        if (res.code == 0) {
          that.data1 = res.data;
        }
      });
    },
    getHealth() {
      let that = this;
      getHealth(null)
        .then(res => {
          if (res.code == 0) {
            var xxx = res.data.map(function(item) {
              return item.year;
            });
            var xxx2 = res.data.map(function(item) {
              return item.name;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option2.xAxis[0].data = yyy;
            that.option2.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });
            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option2.series.push({
                name: zzz[i][0].name,
                type: "line",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }

            that.$echarts
              .init(document.getElementById("myChart2"))
              .setOption(that.option2);
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    getIO() {
      let that = this;
      getIO(null)
        .then(res => {
          if (res.code == 0) {
            var xxx = res.data.map(function(item) {
              return item.year;
            });
            var xxx2 = res.data.map(function(item) {
              return item.name;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option3.xAxis[0].data = yyy;
            that.option3.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });

            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option3.series.push({
                name: zzz[i][0].name,
                type: "bar",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }

            that.$echarts
              .init(document.getElementById("myChart3"))
              .setOption(that.option3);
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    getSub() {
      let that = this;
      getSubSystem(null)
        .then(res => {
          if (res.code == 0) {
            //this.getSubSystemList = res.data
            var xxx = res.data.map(function(item) {
              return item.year;
            });
            var xxx2 = res.data.map(function(item) {
              return item.name;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option5.xAxis[0].data = yyy;
            that.option5.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });

            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option5.series.push({
                name: zzz[i][0].name,
                type: "line",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }

            that.$echarts
              .init(document.getElementById("myChart5"))
              .setOption(that.option5);
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    getWa() {
      let that = this;
      getWano(null)
        .then(res => {
          if (res.code == 0) {
            var xxx = res.data.map(function(item) {
              return item.year;
            });
            var xxx2 = res.data.map(function(item) {
              return item.name;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1||item==null||item.length==0) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option.xAxis[0].data = yyy;
            that.option.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });

            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option.series.push({
                name: zzz[i][0].name,
                type: zzz[i][0].line ? "line" : "bar",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }

            that.$echarts
              .init(document.getElementById("myChart"))
              .setOption(that.option);
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    getFailure() {
      let that = this;
      getFailureMode(null)
        .then(res => {
          if (res.code == 0) {
            var xxx = res.data.map(function(item) {
              return item.name;
            });
            var xxx2 = res.data.map(function(item) {
              return item.year;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option4.xAxis[0].data = yyy;
            that.option4.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.year == item;
                })
              );
            });

            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option4.series.push({
                name: zzz[i][0].year,
                type: "bar",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }

            that.$echarts
              .init(document.getElementById("myChart4"))
              .setOption(that.option4);
          } else {
            this.$Message.info(res.message);
            this.$router.push({ path: "/login" });
          }
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    getEquipment(){
      this.equipmentList=[];
      equipment().then(res => {
        if (res.code == 0) {
          let arry=['D1LHP','D1LHQ','D2LHP','D2LHQ','L1LHP','L1LHQ','L2LHP','L2LHQ','L3LHP','L3LHQ','L4LHP','L4LHQ','0LHS'];
          for(let i=0;i<arry.length;i++){
             this.equipmentList.push(res.data.filter(item => item.aircrewNumber===arry[i])[0])
          }
        }
      });
    },
    getWTGZ(){
      getListByAdminId({adminId:localStorage.getItem('recordUserId')}).then(res => {
        if (res.code == 0) {
          this.wtgzList=res.data;
        }
      });
    },
    // 选择月份
    changeMonth(start, end, current) {
      console.log("changeMonth", start, end, current);
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {
      this.rilimodal=true;
      this.rili.top=pos.top+100;
      this.rili.left=pos.left+20;
      this.rili.aircrewNumber=event.aircrewNumber;
      this.rili.maintainCode=event.maintainCode;
      setTimeout(() => {
        this.rilimodal=false;
      }, 2000);
      // if(event.type==1){
      //   this.$router.push({ path: "/state/stateMonitor" });
      // }else if(event.type==2){
      //   this.$router.push({ path: "/problem/tefectTracking" });
      // }else if(event.type==3){
      //   this.$router.push({ path: "/test/testPlan" });
      // }else if(event.type==4){
      //   this.$router.push({ path: "/repair/repairPlan" });
      // }else if(event.type==5){
      //   this.$router.push({ path: "/runManage/stateWait" });
      // }
    },
    // 点击当天
    dayClick(day, jsEvent) {
      console.log("dayClick", day, jsEvent);
    },
    // 查看更多
    moreClick(day, events, jsEvent) {
      console.log("moreCLick", day, events, jsEvent);
    }
  },
  components: {
    "full-calendar": require("vue-fullcalendar")
  },
  created() {
    this.getAllEqument();
    this.getWanoList();
    this.getHealth();
    this.getIO();
    this.getSub();
    this.getWa();
    this.getFailure();
    this.getEquipment();
    this.getWaiting();
    this.getWTGZ();
    this.dingshi=setInterval(() => {
      this.getEquipment();
    }, 5000);
    //保存中间件 ip
    getTableData({pageNo: 1,pageSize: 20}).then(res => {
        if (res.code == 0) {
          let a=res.data.list.filter(item => item.nodetype==1)
          localStorage.setItem('controlIP',JSON.stringify(a[0]))
        }
      })
  },
  beforeDestroy() {
      clearInterval(this.dingshi)
  },
  mounted(){
    let myChart = this.$echarts.init(document.getElementById("myChart"));
    let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
    let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
    let myChart4 = this.$echarts.init(document.getElementById("myChart4"));
    let myChart5 = this.$echarts.init(document.getElementById("myChart5"));
    myChart.setOption(this.option);
    myChart2.setOption(this.option2);
    myChart3.setOption(this.option3);
    myChart4.setOption(this.option4);
    myChart5.setOption(this.option5);

    let that=this;
    var elementResizeDetectorMaker = require("element-resize-detector");
    var erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById("homemain"), function (element) {
      var width = element.offsetWidth
      var height = element.offsetHeight
      that.$nextTick(function () {
         myChart.resize();
      myChart2.resize();
      myChart3.resize();
      myChart4.resize();
      myChart5.resize();

      })
    })
  }
};
</script>

<style lang="less">
.home {
  padding: 15px;
  .mainbg {
    background: #edf5fe;
    padding: 15px;
    border-radius: 5px;
    height: 330px;
    position: relative;
    .mbt {
      position: absolute;
      right: 15px;
      top: 15px;
      z-index: 999;
      padding: 4px 10px;
      border-radius: 20px;
    }
    .mbt2 {
      padding: 4px 10px;
      border-radius: 20px;
      margin-top: 5px;
    }
    .mainbgH {
      font-size: 16px;
      font-weight: bold;
    }
    .askList {
      margin: 0;
      padding: 0;
      list-style: none;
      height:260px;
      overflow:auto;
      li {
        margin-top: 12px;
        font-size: 14px;
        .loadbg {
          margin-top: 8px;
          width: 80%;
          float: left;
          background: #154ef2;
          .loading {
            background: #ffc90f;
            height: 5px;
          }
        }
        .over {
          overflow: hidden;
        }
        .askFont {
          width: 15%;
          float: right;
        }
      }
    }
    .fbtbg {
      margin-top: 15px;
      background: url(../../../assets/images/fbt.jpg) no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 600px;
      position: relative;
      .fbtTip {
        background: rgba(255,255,255,0.9);
        width: 200px;
        border-radius: 10px;
        box-sizing: border-box;
        position: absolute;
        z-index: 999;
        padding: 15px;
        font-size: 14px;
        line-height: 25px;
        display:none;
      }
    }
    .comp-full-calendar {
      background: none;
      padding: 0px;
      .full-calendar-header .header-center {
        font-weight: bold;
        padding-top: 6px;
        font-size: 15px;
      }
      .full-calendar-body {
        margin-top: 0px;
      }
      .full-calendar-body .dates .dates-events .events-week .events-day {
        min-height: 37px;
      }
      .full-calendar-body
        .dates
        .dates-events
        .events-week
        .events-day
        .day-number {
        padding: 0px;
        height: 18px;
        line-height: 18px;
      }
      .full-calendar-body
        .dates
        .dates-events
        .events-week
        .events-day
        .event-box
        .event-item {
        color: #fff;
      }
      .full-calendar-body .weeks .week {
        height: 25px;
        line-height: 25px;
        background: #618af0;
        color: #fff;
      }
      .full-calendar-body .dates .week-row .day-cell {
        min-height: 37px;
        background: #fff;
      }
    }
  }
  .mar {
    margin-top: 15px;
  }
  .dbtitle {
    font-size: 13px;
    span {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-left: 15px;
      margin-right: 5px;
    }
  }
  .color1 {
    background: #ffbe0e !important;
  }
  .color2 {
    background: #0bb087 !important;
  }
  .color3 {
    background: #0a4add !important;
  }
  .mainbg .comp-full-calendar .full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item {
    width:6px;
    height:6px;
  }
  .mainbg .comp-full-calendar .full-calendar-body .dates .dates-events .events-week .events-day .day-number {
    height:0px;
  }
  .full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item.is-start {
    margin-left:0px;
  }
  .calendarModal {
    z-index: 9999;
    position:absolute;
    width: 150px;
    min-height: 34px;
    padding: 8px 12px;
    color: #fff;
    text-align: left;
    text-decoration: none;
    background-color: rgba(70,76,91,.9);
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
  }
  .jzpoint1,.jzpoint2,.jzpoint3,.jzpoint4,.jzpoint5,.jzpoint6,.jzpoint7,.jzpoint8,.jzpoint9,.jzpoint10,.jzpoint11,.jzpoint12,.jzpoint13{
    width:16px;
    height:16px;
    position:absolute;
    cursor:pointer;
    .cir {
      font-size:24px;
      width:100%;
      height:100%;
      i {
        margin-left:-5px;
        margin-top:-15px;
      }
      //-webkit-animation: twinkling 1s infinite ease-in-out
    }
  }
  .jzpoint1:hover,.jzpoint2:hover,.jzpoint3:hover,.jzpoint4:hover,.jzpoint5:hover,.jzpoint6:hover,.jzpoint7:hover,.jzpoint8:hover,.jzpoint9:hover,.jzpoint10:hover,.jzpoint11:hover,.jzpoint12:hover,.jzpoint13:hover{
    // border:2px solid rgba(255,255,255,1);
    .fbtTip {
      display:block;
    }
  }
  .jzpoint1 {
    left:45px;
    top:263px;
  }
  .jzpoint2 {
    left:68px;
    top:242px;
  }
  .jzpoint3 {
    left:60px;
    top:291px;
  }
  .jzpoint4 {
    left:87px;
    top:268px;
  }
  .jzpoint5 {
    left:317px;
    top:182px;
  }
  .jzpoint6 {
    left:302px;
    top:146px;
  }
  .jzpoint7 {
    left:336px;
    top:168px;
  }
  .jzpoint8 {
    left:324px;
    top:132px;
  }
  .jzpoint9 {
    left:410px;
    top:109px;
  }
  .jzpoint10 {
    left:395px;
    top:80px;
  }
  .jzpoint11 {
    left:430px;
    top:100px;
  }
  .jzpoint12 {
    left:414px;
    top:60px;
  }
  .jzpoint13 {
    left:98px;
    top:314px;
  }
  .animated{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes twinkling{
0%{
opacity: 0.7;
}
100%{
opacity: 1;
}
}
@keyframes twinkling{
0%{
opacity: 0.7;
}
100%{
opacity: 1;
}
}
}
</style>
